<template>
  <div class="indexbg" id="login">
    <!--<div class="login">-->
    <el-row type="flex" class="row-bg" justify="center"
      v-loading="loginLoading"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255,255,255, 0.8)"
      element-loading-text="正在登录中"
    >
      <el-col :xl="11" :lg="11">
        <div style="width:100%;">
        <el-image :src="require('@/assets/img/web-logo.jpg')" style="width:320px;"></el-image>
        <div><el-image :src="require('@/assets/img/v2_r9kfp0.png')" style="width:320px;"></el-image></div>
        <div class="copyright-text">CopyRight © 广东中设智控科技股份有限公司 </div>
        </div>
      </el-col>
      <el-col :span="1">
        <el-divider direction="vertical" style="height:420px;"></el-divider>
      </el-col>
      <el-col :xl="12" :lg="12" justify="center" class="right-box">
        <div class="title-1">精细化能源管理平台</div>
        <div class="title-2">让更多“中国制造”在世界绽放</div>
        <el-form :model="loginForm" :rules="rules" ref="loginForm" class="guangya-loginForm">
          <el-form-item label="" prop="username"  style="width:380px;" class="gyloginForm">
            <i class="el-icon-user loginicon"></i>
            <el-input v-model="loginForm.username" placeholder="请输入管理账号" prefix-icon="u" class="session-file__form"></el-input>
          </el-form-item>
          <el-form-item label="" prop="password" style="width:380px;" class="gyloginForm">
            <i class="el-icon-lock loginicon"></i>
            <el-input v-model="loginForm.password" placeholder="请输入密码" type="password" show-password prefix-icon="p" size="medium"></el-input>
          </el-form-item>
          <el-form-item label="" style="width: 380px">
            <el-checkbox v-model="ischeckname" label="记住用户名" size="medium" text-color="#000000"/>
          </el-form-item>
          <el-form-item>
            <el-button class="login-btn" color="#1B7DD2" @click="submitForm('loginForm')">确定登录</el-button>
          </el-form-item>
        </el-form>
        <!-- <div class="zhichi-text">技术支持：中设智控</div> -->
      </el-col>
    </el-row>
    <!--</div>-->
    
  </div>
</template>
<script>
import {userLogin}  from "@/api/sendhttp/login.js";
import { setToken } from '@/utils/auth'
export default {
  name: "Login",
  data() {
    return {
      loginForm: {
        username: '',
        password: '',
        //code: '',
        //token: '',
      },
      loginLoading:false,
      ischeckname:false,
      rules: {
        username: [
          {required: true, message: '请输入管理账号', trigger: 'blur'},
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'}
        ]
      },
      redirect: null,
      //captchaImg: null,
    };
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true
    }
  },
  methods: {
    submitForm(formName) {
      if(this.ischeckname==true){
        localStorage.setItem("username", this.loginForm.username);
        localStorage.setItem("ischeckname", this.ischeckname);
      }else{
        localStorage.setItem("username", '');
        localStorage.setItem("ischeckname",false);
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loginLoading=true;
          userLogin(this.loginForm).then(res => {
            this.loginLoading=false;
            let resData=res.data;
            if(resData.code==200){
               const sessionId=resData.sessionId;
                // 设置 token
                setToken(sessionId);

               //登陆成功：设置提示后延迟执行进入主面板
               this.$message({
                  showClose: true,
                  message:resData.message,
                  duration:'1000',
                  type: 'success'
                });
               setTimeout(()=>{ 
                  // 跳转路由
                  this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
                },1200);
            }else{
              this.$alert(resData.message, '提示', {
                 type: 'error'
              });
               return false;
            }
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //获取验证码
    getCaptchaImg() {
      this.$axios.get('/captcha').then(res => {
        console.log("/captcha")
        console.log(res)
        this.loginForm.token = res.data.data.token
        this.captchaImg = res.data.data.captchaImg
      })
    },
    checkNameInput(){
      if(localStorage.getItem("ischeckname")=="true"){
        this.loginForm.username = localStorage.getItem("username");
        this.ischeckname = true;
      }else{
        this.ischeckname = false;
      }
    },

  },
  created() {
    //this.getCaptchaImg()
    this.checkNameInput();
    // 按 Enter 键登录系统:大键盘小键盘都能实现
    document.onkeydown = (e) => {
      e = window.event || e
      if (this.$route.path === '/login' &&(e.keyCode===13 || e.keyCode===100)) this.submitForm('loginForm');
    }
  },

}
</script>
<style>
.gyloginForm{
  position: relative;
}
.loginicon{
  position: absolute;
  left:5px;
  top:10px;
  color: #1B7DD2;
  font-size:28px;
  z-index:10;
}
.indexbg .el-input--prefix .el-input__inner {
  border:none!important;
  outline:none;
  border-radius:0px!important;
  border-bottom:1px solid #eee!important;
  padding-left:50px;
  height: 50px!important;
  font-size:18px!important;
}
.indexbg .el-loading-spinner .el-loading-text{
  color: #666!important;
}
</style>
<style scoped>
html,
body,
#login {
    background: url('@/assets/img/indexbg.jpg') center no-repeat;
    background-size:cover;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

.el-divider {
  height:420px;
}

.el-row {
  width:980px;
  background-color:#ffffff;
  height:560px;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  position: absolute;
  left:50%;
  top:50%;
  margin-left:-480px;
  margin-top:-280px;
  border:1px solid #f1f1f1;
  border-radius:12px;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 80%);
}
.right-box{
  height:420px;
  text-align: left;
  padding-left:45px;
}
.title-1{
  font-size:42px;
  font-weight: bold;
  color:#283443;
}
.title-2{
  font-size:16px;
  color:#C7C7CE;
  margin-top:5px;
  margin-bottom:50px;
}
.captchaImg {
  margin-left: 8px;
  /*width: px;*/
  float: left;
  border-radius: 4px;

}
.login-btn{
  background:#1B7DD2!important;
  width:380px;
  height:50px;
  color:#ffffff;
  font-size:18px;
}

.copyright-text{
  color:#BCC5D0;
  font-size:14px;
}
.zhichi-text{
  color: #BCC5D0;
  text-align: center;
  font-size:14px;
  padding-right:60px;
}
@keyframes bganimation {
      0% {
	  	left: 100vw;
	  }
	  50% {
	  	left: -50vw;
	  }
	  100% {
	  	left: -100vw;
	  }
  }
</style>